<script setup lang="ts">
import { getGuessGoodsDataAPI } from '@/services/home'
import type { GoodsItem } from '@/types/global'
import { onMounted, ref } from 'vue'

/**猜你喜欢的数据*/
const guessList = ref<GoodsItem[]>([])
/**总页数*/
let totalPages = ref(1)
/**当前页码*/
let currentPage = ref(0)
/**上拉触底时提示显示的文字*/
let loadingText = ref('正在加载...')

// 获取猜你喜欢的数据
const getGuessGoodsData = async () => {
  // 判断当前页码是否大于等于总页码 数据获取完毕 修改底部提示文字 结束函数调用
  if (currentPage.value >= totalPages.value)
    return (loadingText.value = '没有更多数据了')
  // 数据还未获取完毕,调用接口获取下一页数据
  const result = await getGuessGoodsDataAPI(currentPage.value + 1)
  // 追加存储猜你喜欢的数据
  guessList.value = guessList.value.concat(result.result.items)
  // 存储总页数
  totalPages.value = result.result.pages
  // 存储当前页码
  currentPage.value = result.result.page
}

// 重置猜你喜欢的数据
const resetData = async () => {
  // 清空猜你喜欢的数据
  guessList.value = []
  // 修改底部提示文字
  loadingText.value = '正在加载...'
  // 重置当前页码为0
  currentPage.value = 0
  // 重新第一页的数据
  await getGuessGoodsData()
}

// 组件挂载完毕
onMounted(() => {
  // 获取猜你喜欢的数据
  getGuessGoodsData()
})

// 暴露组件内部的方法
defineExpose({ getMore: getGuessGoodsData, resetData })
</script>
<template>
  <!-- 猜你喜欢 -->
  <view class="caption">
    <text class="text">猜你喜欢</text>
  </view>
  <view class="guess">
    <navigator
      class="guess-item"
      v-for="item in guessList"
      :key="item.id"
      :url="`/pages/goods/goods?id=${item.id}`"
    >
      <image class="image" mode="aspectFill" :src="item.picture"></image>
      <view class="name">
        {{ item.name }}
      </view>
      <view class="price">
        <text class="small">¥</text>
        <text>{{ item.price }}</text>
      </view>
    </navigator>
  </view>
  <view class="loading-text"> {{ loadingText }} </view>
</template>

<style lang="scss">
:host {
  display: block;
}
@import '@/components/styles/CustomGuess.scss';
</style>
